<template>
  <div>
    <Headline
      :headline1="$t('m.PersonnelAdmin') + '  /  '"
      :headline2="$t('m.ClassAndGrade')"
    />
    <a-card style="width: 100%">
      <!-- 搜索框 -->
      <div class="search-a ov_flex">
        <a-input-search
          :placeholder="$t('m.PleaseEnterCategoryKeywords')"
          size="default"
          @search="ageSearch"
          v-model="formagedata.key"
        />
        <a-input
          class="input-s"
          :placeholder="$t('m.PleaseEnterTheNameOfTheLevelMenu')"
          size="default"
          v-model="formages.custOrgName"
        />
        <div class="btn-dispo">
          <a-button
            class="btn-dispo"
            style="width: 100%; height: 32px"
            type="primary"
            @click="agesbtn"
            >{{ $t("m.Add") }}</a-button
          >
        </div>
      </div>
      <!-- tree表单 -->
      <a-table
        class="tree"
        :columns="columns"
        :data-source="items"
        :expanded-row-keys.sync="expandedRowKeys"
        :rowKey="(record) => record.id"
        bordered
        :expandedRowKeys="RowKeys"
        @expand="itema"
      >
        <!-- 排序 -->
        <div slot="order" slot-scope="text, tags">
          <a-tag size="mini" color="blue" v-if="tags.ymorgtreecode.length === 3"
            >一级</a-tag
          >
          <a-tag
            type="success"
            size="mini"
            color="green"
            v-else-if="tags.ymorgtreecode.length === 6"
            >二级</a-tag
          >
          <a-tag type="warning" color="pink" size="mini" v-else>三级</a-tag>
        </div>
        <!-- 操作 -->
        <div slot="tags" slot-scope="text, tags">
          <a-button
            class="btn"
            type="primary"
            icon="plus-square"
            @click="ageress(tags)"
            >{{ $t("m.Add") }}</a-button
          >
          <a-button
            class="btn"
            type="primary"
            icon="edit"
            @click="agechang(tags)"
            >{{ $t("m.Modification") }}</a-button
          >
          <a-button
            class="btn"
            type="danger"
            icon="delete"
            @click="showress(tags)"
            >{{ $t("m.Delete") }}</a-button
          >
        </div>
      </a-table>
    </a-card>
    <!-- 添加弹窗 -->
    <a-modal
      :title="$t('m.AddClassification')"
      :visible="visibles"
      @ok="agesOk"
      width="600px"
  :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      @cancel="handleCancels"
    >
      <div>
        <a-form-item class="box-has" :label="$t('m.TheNewClassification')">
          <a-input v-model="formages.custOrgName" />
        </a-form-item>
      </div>
    </a-modal>
    <a-modal
      :title="$t('m.ModifyTheClassification')"
      :visible="visible"
     :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      @ok="regOk"
      width="600px"
      @cancel="regCancels"
    >
      <div>
        <a-form-item class="box-has" :label="$t('m.TheNewClassification')">
          <a-input v-model="formages.custOrgName" />
        </a-form-item>
      </div>
    </a-modal>
    <Delete ref="delete" :dalete="dalete" @confirm="agedelete"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Searchs from "@/components/common/Searchs";
import { Delchildren } from "@/assets/js/setperms";
import Delete from "@/components/Delete";
import { Setperms } from "@/assets/js/setperms";
import { getPerages, getPerdetale, getPeradd } from "@/api/perAges";
export default {
  name: "Perages",
  components: { Headline, Delete, Searchs },
  data() {
    return {
      showStatus: false,
      btn: [
        {
          title: this.$t("m.Add"),
          type: "primary",
        },
        {
          title: this.$t("m.Modification"),
          type: "primary",
        },
      ],
      dalete: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      value: "",
      // 表单模型
      // 表格插件的数据配置
      columns: [
        {
          title: this.$t("m.SystematicNameProperLiSing"),
          dataIndex: "custorgname",
          align: "center",
        },
        {
          title: this.$t("m.Number"),
          key: "ymorgtreecode",
          dataIndex: "ymorgtreecode",
        },
        {
          title: this.$t("m.Sort"),
          dataIndex: "order",
          key: "order",
          scopedSlots: { customRender: "order" },
        },
        {
          title: this.$t("m.Operation"),
          key: "tags",
          dataIndex: "address",
          scopedSlots: { customRender: "tags" },
        },
      ],
      // 表单数据
      items: [],
      // 控制弹窗的开关
      visibles: false,
      visible: false,
      formages: {
        id: 0,
        ymOrgTreeCode: "", //组织编号
        orgType: 2, //组织类型
        custType: 0, //客户类型
        custOrgCode: 0, //客户组织编号
        custOrgName: "", //客户组织名称
        parentId: 0, //父组织id
        status: 1, //状态
      },
      formagedata: {
        orgType: 2,
        key: "",
      },
      _id: "", //删除id保存
      expandedRowKeys: [],
      RowKeys: [],
    };
  },
  created() {
    this._getPerages();
    this.parms = Setperms(
      this.$route.fullPath,
      JSON.parse(sessionStorage.getItem("menu"))
    );
    console.log(this.parms);
  },
  methods: {
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    // 请求数据
    _getPerages() {
      getPerages({ params: this.formagedata }).then((res) => {
        if (res.data) {
          this.items = Delchildren(res.data);
          this.$message.success("获取班级数据成功");
        }
      });
    },
    //搜索框按钮点击
    ageSearch() {
      this._getPerages();
    },
    //一级菜单添加按钮点击
    agesbtn() {
      if (this.formages.custOrgName == "") {
        this.$message.error("菜单名不能为空");
      } else {
        getPeradd(this.formages).then((res) => {
          if (res.status == 200) {
            this.$message.success("添加一级菜单成功");
            this.formages.custOrgName = "";
            this.formages.parentId = 0;
            this._getPerages();
          } else {
            this.$message.error("添加菜单失败");
          }
        });
      }
    },
    address() {
      this.visibles = true;
    },
    // 弹窗确定
    agesOk() {
      if (this.formages.custOrgName == "") {
        this.$message.error("菜单名不能为空");
      }else{
      getPeradd(this.formages).then((res) => {
        this.$message.success("数据添加成功");
        //  清空数据
        this.formages.custOrgName = "";
        this.formages.ymOrgTreeCode = "";
        this.formages.parentId = 0;
        this._getPerages();
      });
      this.visibles = false;
      }
    },
    // 弹窗取消
    handleCancels() {
      this.visibles = false;
      this.formages.custOrgName = "";
      this.formages.ymOrgTreeCode = "";
      this.formages.parentId = 0;
    },
    regCancels() {
      this.visible = false;
      this.formages.ymOrgTreeCode = "";
      this.formages.parentId = 0;
      this.formages.id = 0;
      this.formages.custOrgName = "";
    },
    //添加按钮的点击
    ageress(scope) {
      this.visibles = true;
      if (scope.ymorgtreecode !== "") {
        this.formages.ymOrgTreeCode = scope.ymorgtreecode;
        this.formages.parentId = scope.id;
      }
    },
    //删除按钮点击
    showress(row) {
      this._id = row.id; //保存id
      this.$refs.delete.showModal("删除用户");
    },
    //删除弹窗确定点击
    agedelete() {
      getPerdetale({
        id: this._id,
        orgType: this.formages.orgType,
      }).then((res) => {
        console.log(res);
        const tip = res.data.msg;
        if ((res.status = 200)) {
          if (tip == "删除成功") {
            this.$message.success(tip);
            this._getPerages();
          } else {
            this.$message.error(tip);
          }
        }
        this.$refs.delete.handleCancel();
      });
    },
    agechang(row) {
      this.formages.ymOrgTreeCode = row.ymorgtreecode;
      this.formages.parentId = row.id;
      this.formages.id = row.id;
      this.formages.custOrgName = row.custorgname;
      this.visible = true;
    },
    //修改弹窗确定点击
    regOk() {
      getPeradd(this.formages).then((res) => {
        this.$message.success("数据修改成功");
        //  清空数据
        this.formages.custOrgName = "";
        this.formages.ymOrgTreeCode = "";
        this.formages.parentId = 0;
        this.formages.id = 0;
        this._getPerages();
      });
      this.visible = false;
    },
    regCancel() {
      this.visible = false;
    },
    itema(expanded, record) {
      console.log(expanded, record);
      if (expanded) {
        this.RowKeys.push(record.id);
      } else {
        this.RowKeys.forEach((item, index) => {
          if (item == record.id) {
            this.RowKeys.splice(index, 1);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search-a {
  width: 600px;
}
.ov_flex {
  display: flex;
  align-items: center;
}
.btn {
  width: 73px;
  font-size: 10px;
  margin-left: 10px;
}
.btn-dispo {
  border-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.tree {
  margin-top: 30px;
}
.box-has {
  display: flex;
  width: 550px;
  padding: 0px 80px;
}
/deep/ .ant-form-item-control-wrapper {
  width: 100%;
}
.input-s {
  margin-left: 15px;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.flexitem {
  display: flex;
}

/deep/ .ant-table-row-level-1 td:first-child .indent-level-1 {
  margin-left: 23px !important;
}
/deep/ .ant-table-row-level-2 td .indent-level-2 {
  margin-left: 46px !important;
}
/deep/ .ant-table-row-level-3 td .indent-level-3 {
  margin-left: 69px !important;
}
</style>
